<template>
  <div class="app-container">
    <div class="filter-item-table">
      <el-table
        :data="dataDetail"
        :cell-style="{ textAlign: 'center', fontSize: '13px' }"
        :header-cell-style="{
          textAlign: 'center',
          fontWeight: '100',
          fontSize: '13px',
          color: 'white',
          backgroundColor: '#009688'
        }"
      >
        <el-table-column label="订单编号" prop="orderId" />
        <el-table-column label="送货地址" prop="deliveryAddress" />
        <el-table-column label="预定送货时间" prop="deliveryStartTime" />
        <el-table-column label="剩余时间" prop="deliveryEndTime" />
        <el-table-column label="订单类型" prop="orderType" />
        <el-table-column label="订单备注" prop="orderRemark" />
      </el-table>
    </div>
    <div class="filter-item-left">
      <div class="mapContainer" id="mapContainer"></div>
    </div>
    <div class="filter-item-right">
      <div v-for="item in deliveryList" :key="item.userId" class="content">
        <span class="name">{{ item.fullName }}</span>
        <span class="number">分拣中订单数量：{{ item.orderNum }}</span>
        <span class="radio"><el-radio v-model="radio" label="" :value="item.userId"></el-radio></span>
      </div>
      <div class="btn-container">
        <el-button type="primary" size="small" @click="handleDispatch">派单</el-button>
      </div>
    </div>
  </div>
</template>

<script name="sortDetail" lang="ts" setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { OrderDetail } from "@/api/interface/city/dispatch";
import { dispatchOrderDetailAPI, getDeliveryManListAPI, getOrderDetailAPI } from "@/api/modules/city/dispatchAPI";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const radio = ref<number>();
const dataDetail = ref<OrderDetail.Detail[]>([]);
// const goodsDetail = ref<SortDetail.Good[]>([]);
const getDispatchDetail = async () => {
  const { code, data, msg } = await getOrderDetailAPI(Number(route.query.id));
  if (code == "200" && data) {
    if (data.detail) {
      dataDetail.value.push(data.detail);
    }
    // if (data.goods) {
    //   goodsDetail.value = data.goods;
    // }
  } else {
    ElMessage.error(msg);
  }
};
const deliveryList = ref<
  {
    fullName: string;
    orderNum: number;
    userId: number;
    longitude: number;
    latitude: number;
  }[]
>([]);
const handleDispatch = () => {
  ElMessageBox.confirm("是否确认派单？")
    .then(() => {
      if (radio.value) {
        dispatchOrder(route.query.id as string, radio.value as number);
      } else {
        ElMessage.error("请选择配送员");
      }
    })
    .catch(() => {
      ElMessage.info("操作已取消");
    });
};
const getDispatchDriverList = async () => {
  // TODO: 获取列表
  const { data, code, msg } = await getDeliveryManListAPI({ stationId: route.query.stageId as string });
  if (code == "200" && data) {
    deliveryList.value = data;
  } else {
    ElMessage.error(msg);
  }
};
const dispatchOrder = async (orderId: string, userId: number) => {
  // TODO: 调用派单接口
  const { code, msg } = await dispatchOrderDetailAPI({
    orderId: orderId,
    userId: userId
  });
  if (code == "200") {
    ElMessage.success("派单成功");
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getDispatchDetail();
  getDispatchDriverList();
  initMap();
});
let map = ref<AMap.Map>();
const initMap = (): void => {
  //@decription: 初始化地图
  // 需要再次声明全局变量，否则会报错
  window._AMapSecurityConfig = {
    securityJsCode: "e741cd4020ecd80db4d0823c5a7add61"
  };
  AMapLoader.load({
    key: "6e7f26ec5e8f0af59f064c53e5fe2654", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Scale"] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then(AMap => {
      map.value = new AMap.Map("mapContainer", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [106.253336, 38.446641], // 初始化地图中心点位置
        resizeEnable: true //是否监控地图容器尺寸变化
      });
    })
    .catch(e => {
      console.log(e);
    });
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 15px;
  background-color: white;
}
.filter-item-table {
  margin-bottom: 20px;
}
.filter-item-left {
  display: inline-block;
  width: 57%;
  padding: 10px;
  vertical-align: top;
  border: 1px solid #e0e0e0;
  .filter-item-left-title {
    padding: 15px 0;
    span {
      font-size: 13px;
      font-weight: 600;
      color: cornflowerblue;
    }
  }
  .filter-item-left-table {
    .left-table-title {
      padding: 10px 0;
      font-size: 13px;
      color: gray;
    }
  }
  .mapContainer {
    height: 450px;
  }
}
.filter-item-right {
  display: inline-block;
  width: 39%;

  // border: 1px solid red;
  padding: 10px;
  vertical-align: top;
  .content {
    padding: 8px;
    span {
      display: inline-block;
      padding: 3px 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
    }
    span:nth-last-child(1) {
      float: right;
    }
    .name {
      color: white;
      background: #009688;
      border-radius: 10px;
    }
  }
  .btn-container {
    margin-top: 130px;
    text-align: right;
  }
}
</style>
